<style>
.icontd {
  padding-left: 20px;
  width: 75px;
  height: 64px;
}
.table1 {
  width: 100%;
}
.table1 tr {
  cursor: pointer;
}
.table1 td:hover {
  background-color: #ffff00;
}
.table1 tr.even {
  background-color: #eeeeee;
}
.table1 tr.odd {
  background-color: #ffffff;
}

.table2 td {
  border: 0;
}
</style>
<div id="effect" style="width: 100%;">
  <table class="table1" cellPadding="0" cellSpacing="0">
  {{foreach $plugins as $p}}
    <tr class="{{if $p@iteration is div by 2}}even{{else}}odd{{/if}}">
      <td onclick="view_plugin('{{$p->id}}', '{{$p->folder}}', '{{$menu_id}}');">
        <table class="table2">
          <tr>
            <td class="icontd">
              <img src="./plugins/{{$p->folder}}/_store/icon.png">
            </td>
            <td>
              <b>{{$p->name}}</b>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  {{/foreach}}
  </table>
</div>

<script type="text/javascript">
<!--
  function view_plugin(plugin_id, plugin_folder, menu_id) {
    var div = document.getElementById('effect');
    if ((div.offsetWidth + div.offsetLeft) < 0) {
      location.href='?t=plugin&i=' + plugin_id + '&s=' + plugin_folder +'&m=' + menu_id;
      return;
    }
    div.style.position = 'absolute';
    div.style.left = div.offsetLeft - 10 + 'px';
    setTimeout(function() { view_plugin(plugin_id, plugin_folder, menu_id) }, 1);
    
  }
// -->
</script>